<template>
    <h2>门店显示页面</h2>
    门店名称<input type="text" v-model="sname"/>
    <input type="button" value="查询" @click="SeleteData">
    <input type="button" value="添加" @click="addShop">

    <table border="1">
        <thead>
            <tr>
            <td>门店名称</td>
            <td>分店名称</td>
            <td>门店地址</td>
            <td>门店电话</td>
            <td>门店状态</td>
            <td>门店介绍</td>          
            <td>入住须知</td>
            <td>交通信息</td>
            <td>操作</td>
        </tr>
        </thead>
        <tbody>
            <tr v-for="item in shop" :key="item.Shop_Id">
            <td>{{item.Shop_Name}}</td>
            <td>{{item.Shop_BranchName}}</td>
            <td>{{item.Shop_Address}}</td>
            <td>{{item.Shop_Phone}}</td>
            <td>{{item.Shop_State}}</td>
            <td>
                <img style="width:50px;height:50px;" :src="item.Shop_Img"/>
            </td>
            <td>{{item.Shop_Notice}}</td>
            <td>{{item.Shop_Traffic}}</td>
           <td>
            <input type="button" value="删除" @click="delShop(item.Shop_Id)"/>
            <input type="button" value="修改" @click="editShop(item.Shop_Id)"/>
           </td>
        </tr>
        </tbody>
    </table>
    共{{page.count}}条数据，每页{{ page.size }}条数据，第{{ page.index }}/{{ page.pcount }}页
    <a href="#" style="margin-right:10px" @click="pageChange('F')">首页</a>
    <a href="#" style="margin-right:10px" @click="pageChange('P')">上一页</a>
    <a href="#" style="margin-right:10px" @click="pageChange('N')">下一页</a>
    <a href="#" style="margin-right:10px" @click="pageChange('E')">尾页</a>
    <select v-model="csize" @change="ChangeSize">
        <option value="1">每页1条</option>
        <option value="2">每页2条</option>
        <option value="3">每页3条</option>
    </select>
    <input type="text" style="width:20px;"  v-model="nindex"/>
    <input type="button" value="跳转" @click="jump"/>
</template>

<script setup lang="ts">
    import{ref,onMounted} from 'vue'
    import {useRouter} from 'vue-router'
    const router=useRouter();
    import axios from 'axios'
    const pageChange=(mes:string)=>{
        switch(mes)
        {
            case 'F':page.value.index=1;break;
            case 'P':
                if(page.value.index>1)
                {
                    page.value.index--;
                }
                else
                {
                    alert('已经是第一页了');
                }
                break;
            case 'N':
                if(page.value.index<page.value.pcount)
                {
                    page.value.index++;
                }
                else
                {
                    alert('已经是最后一页了');
                }
                break;
            case 'E':page.value.index=page.value.pcount;break;
        }
        loadData();
    }
    const csize=ref(2);
    const ChangeSize=()=>{
        page.value.size=csize.value;
        page.value.index=1;
        loadData();
    }
    const nindex=ref("");
    const jump=()=>{
        if(nindex.value=="")
        {
            alert('请输入正确页码');
            return;
        }
        if(isNaN(Number(nindex.value)))
        {
            alert('请输入数字');
            return;
        }
        if(Number(nindex.value)>=1&&Number(nindex.value)<=page.value.pcount)
        {
            page.value.index=Number(nindex.value);
            loadData();
        }
        else
        {
            alert('请输入正确页码');
            return;
        }
    }

    const shop=ref([ {
      "Shop_Id": 1,
      "Shop_Img": "string",
      "Shop_Name": "阿斯蒂芬",
      "Shop_BranchName": "",
      "Shop_Address": "",
      "Shop_Phone": "",
      "Shop_State": true,
      "Shop_Info": "string",
      "Shop_Notice": "string",
      "Shop_Traffic": "string",
      "Shop_InfoState": false,
      "Shop_InfoStateTime": "2024-08-25T18:59:53.0752846"
    }])
    const page=ref({
        index:1,
        size:2,
        pcount:0,
        count:0
    })
    const sname=ref("");
    onMounted(()=>{     
        loadData();
    })
    const loadData=()=>{

        axios.get('https://localhost:44320/api/Shop/ShopShow',
        {
            params:{
                sname:sname.value,
                index:page.value.index,
                size:page.value.size
            }
        })
        .then(res=>{
            console.log(res.data);
            shop.value=res.data.pageList;
            page.value.count=res.data.count;
            page.value.pcount=res.data.pcount;
        })
    }
    const delShop=(sid:number)=>{
       if(confirm('确定删除吗'))
       {
        axios.delete('https://localhost:44320/api/Shop/ShopDel',{
            params:{
                sid:sid
            }
        })
        .then(res=>{
            if(res.data>0)
            {
                alert('删除成功');        
                page.value.index=1;
                loadData();
            }
            else{
                alert('删除失败');
            }
        })
       }
    }
    const editShop=(sid:number)=>{
        router.push({
            path:"/editShop",
            query:{
                sid:sid
            }
        })
    }
    const SeleteData=()=>{
        loadData();
        page.value.index=1;
    }

    const addShop=()=>{
        router.push('/addShop');
    }
</script>